<template>
  <div class="demo-container">
    <h2>基本表格功能</h2>
    <p>展示基本表格功能，包括多选、序号、排序等</p>

    <div class="controls">
      <el-switch
        v-model="tableConfig.selection"
        active-text="启用多选"
        inactive-text="禁用多选"
      />
      <el-switch
        v-model="tableConfig.showIndex"
        active-text="显示序号"
        inactive-text="隐藏序号"
      />
    </div>

    <AdvancedTable
      :data="tableData"
      :columns="columns"
      :selection="tableConfig.selection"
      :show-index="tableConfig.showIndex"
      :highlight-current-row="true"
      height="500px"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      @row-click="handleRowClick"
    >
      <!-- 自定义工具栏 -->
      <template #toolbar>
        <div class="toolbar">
          <el-button type="primary">新增</el-button>
          <el-button type="danger" :disabled="selectedRows.length === 0"
            >批量删除</el-button
          >
          <el-input
            v-model="searchKeyword"
            placeholder="请输入关键词搜索"
            style="width: 200px"
            clearable
          >
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </template>

      <!-- 自定义列模板 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" link @click="handleDelete(row)"
          >删除</el-button
        >
      </template>
    </AdvancedTable>

    <div v-if="selectedRows.length > 0" class="selected-info">
      已选择 {{ selectedRows.length }} 条记录
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { AdvancedTable } from '../components/Table'

// 表格配置
const tableConfig = reactive({
  selection: true,
  showIndex: true,
})

// 表格列定义
const columns = [
  {
    prop: 'name',
    label: '姓名',
    width: 120,
    sortable: true,
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80,
    sortable: true,
  },
  {
    prop: 'address',
    label: '地址',
    minWidth: 180,
  },
  {
    prop: 'date',
    label: '日期',
    width: 120,
    sortable: true,
  },
  {
    prop: 'operation',
    label: '操作',
    width: 150,
    fixed: 'right',
  },
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    age: 28,
    address: '北京市朝阳区',
    date: '2023-01-15',
  },
  {
    id: 2,
    name: '李四',
    age: 32,
    address: '上海市浦东新区',
    date: '2023-02-20',
  },
  {
    id: 3,
    name: '王五',
    age: 24,
    address: '广州市天河区',
    date: '2023-03-10',
  },
  {
    id: 4,
    name: '赵六',
    age: 35,
    address: '深圳市南山区',
    date: '2023-04-05',
  },
  {
    id: 5,
    name: '钱七',
    age: 29,
    address: '杭州市西湖区',
    date: '2023-05-12',
  },
])

// 搜索关键词
const searchKeyword = ref('')

// 已选择的行
const selectedRows = ref<any[]>([])

// 表格事件处理
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

const handleSortChange = ({ prop, order }: { prop: string; order: string }) => {
  ElMessage.success(`排序字段: ${prop}, 顺序: ${order}`)
}

const handleRowClick = (row: any) => {
  console.log('点击行:', row)
}

// 操作按钮事件
const handleEdit = (row: any) => {
  ElMessage.info(`编辑记录: ${row.name}`)
}

const handleDelete = (row: any) => {
  ElMessage.warning(`删除记录: ${row.name}`)
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

.controls {
  margin: 15px 0;
  display: flex;
  gap: 20px;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.selected-info {
  margin-top: 10px;
  color: #409eff;
  font-weight: bold;
}
</style>
